import { useEffect, useRef, useState } from 'react';
import mermaid from 'mermaid';
import { Card } from 'antd';

const MermaidDiagram = ({ content }) => {
  const containerRef = useRef(null);
  const [isMobile, setIsMobile] = useState(false);
  const [diagramRendered, setDiagramRendered] = useState(false);

  // 检测是否为移动设备
  useEffect(() => {
    const checkIsMobile = () => {
      setIsMobile(window.innerWidth <= 576);
    };
    
    checkIsMobile();
    window.addEventListener('resize', checkIsMobile);
    
    return () => {
      window.removeEventListener('resize', checkIsMobile);
    };
  }, []);

  // 重新渲染图表的函数 - 窗口大小变化时使用
  const rerenderDiagram = () => {
    if (containerRef.current && diagramRendered) {
      // 重置渲染状态
      setDiagramRendered(false);
      
      // 延迟一点点以确保状态更新
      setTimeout(() => {
        // 渲染图表
        renderMermaidDiagram();
        setDiagramRendered(true);
      }, 50);
    }
  };
  
  // 监听窗口大小变化，重新渲染图表
  useEffect(() => {
    const handleResize = () => {
      rerenderDiagram();
    };
    
    window.addEventListener('resize', handleResize);
    
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, [diagramRendered, content]);

  useEffect(() => {
    // 确保mermaid库已正确初始化
    try {
      mermaid.initialize({
        startOnLoad: false, // 手动控制渲染
        theme: 'default',
        securityLevel: 'loose',
        flowchart: {
          htmlLabels: true,
          curve: 'basis', // 使用更平滑的曲线
          nodeSpacing: isMobile ? 30 : 50,
          rankSpacing: isMobile ? 40 : 80,
          rankDir: isMobile ? 'TB' : 'LR', // 根据设备自动调整方向
          useMaxWidth: true,
        },
        fontSize: isMobile ? 14 : 12, // 根据设备调整字体大小
        themeCSS: `
          .node rect, .node circle, .node ellipse, .node polygon, .node path {
            fill: #E8F4FF;
            stroke: #1766a3;
            stroke-width: 1px;
          }
          .node.current rect, .node.current circle, .node.current ellipse, .node.current polygon {
            fill: #ffffde;
            stroke: #1766a3;
          }
          .edgePath .path {
            stroke: #1766a3;
            stroke-width: 1.5px;
          }
          .arrowheadPath {
            fill: #1766a3;
          }
          .edgeLabel {
            background-color: white;
            padding: 4px;
            border-radius: 4px;
            font-size: 11px;
          }
          .cluster rect {
            fill: #F0F7FF;
            stroke: #1766a3;
            stroke-width: 1px;
          }
          .cluster text {
            font-weight: 500;
            font-size: 12px;
          }
          .label text {
            fill: #333;
            font-size: 12px;
          }
          div.mermaidTooltip {
            font-size: 11px;
          }
          .flowchart-label text {
            font-size: ${isMobile ? '14px' : '12px'} !important;
          }
          .node text {
            font-size: ${isMobile ? '13px' : '11px'} !important;
          }
          .edgeLabel text {
            font-size: ${isMobile ? '12px' : '10px'} !important;
          }
          text {
            font-family: '微软雅黑', 'Microsoft YaHei', sans-serif !important;
            font-size: ${isMobile ? '13px' : '11px'} !important;
          }
        `
      });
      
      console.log("Mermaid初始化成功");
    } catch (error) {
      console.error("Mermaid初始化失败:", error);
    }

    if (content && containerRef.current) {
      // 渲染图表
      renderMermaidDiagram();
      setDiagramRendered(true);
    }
  }, [content, isMobile]);

  // 渲染流程图
  const renderMermaidDiagram = () => {
    if (!containerRef.current || !content) return;
    
        try {
          // 显示正在渲染的提示
      containerRef.current.innerHTML = `<div style="padding: 20px; text-align: left;">正在渲染流程图...</div>`;
          
          // 创建唯一ID
      const id = `mermaid-${Date.now()}`;
      
      // 获取容器宽度，用于计算适合的比例
      const containerWidth = containerRef.current.clientWidth || containerRef.current.offsetWidth || 800;
          
      // 使用回调函数API渲染
          try {
        mermaid.render(id, content, (svgCode) => {
          containerRef.current.innerHTML = `
                <div class="mermaid-diagram">
                  ${svgCode}
                </div>
              `;
              
              // 调整SVG大小和样式
          const svg = containerRef.current.querySelector('svg');
              if (svg) {
            // 设置SVG响应式
            svg.setAttribute('width', '100%');
            svg.setAttribute('height', '100%');
            svg.style.width = '100%';
            svg.style.height = 'auto';
            svg.style.maxWidth = '100%';
            svg.style.display = 'block';
            svg.style.margin = '0 auto'; // 居中显示
            
            // 获取SVG的viewBox
            let viewBox = svg.getAttribute('viewBox');
            if (!viewBox) {
              // 如果没有viewBox，创建一个基于svg宽高的viewBox
              const svgWidth = parseFloat(svg.getAttribute('width')) || containerWidth;
              const svgHeight = parseFloat(svg.getAttribute('height')) || 300;
              viewBox = `0 0 ${svgWidth} ${svgHeight}`;
              svg.setAttribute('viewBox', viewBox);
            }
                
            // 调整SVG内部文本元素的字体大小
                const allTexts = svg.querySelectorAll('text');
                allTexts.forEach(text => {
              // 设置字体大小，移动设备略大
                  const fontSize = isMobile ? '13px' : '11px';
                  text.setAttribute('font-size', fontSize);
                  text.style.fontSize = fontSize;
                  
                  // 移除可能存在的字体大小样式
                  const style = text.getAttribute('style') || '';
                  text.setAttribute('style', style.replace(/font-size:.*?;/, '') + `; font-size: ${fontSize} !important;`);
                });
                
                // 调整节点样式
                const nodes = svg.querySelectorAll('.node rect, .node circle, .node ellipse, .node polygon');
                nodes.forEach(node => {
                  node.setAttribute('fill', '#E8F4FF');
                  node.setAttribute('stroke', '#1766a3');
                  node.setAttribute('stroke-width', '1px');
                });
                
                // 调整连线样式
                const edges = svg.querySelectorAll('.edgePath path');
                edges.forEach(edge => {
                  edge.setAttribute('stroke', '#1766a3');
                  edge.setAttribute('stroke-width', '1.5px');
                });

                // 添加全局样式覆盖
                const style = document.createElement('style');
                const mobileFontSize = isMobile ? '13px' : '11px';
                const mobileNodeFontSize = isMobile ? '13px' : '11px';
                const mobileEdgeLabelFontSize = isMobile ? '12px' : '10px';
                const mobileClusterFontSize = isMobile ? '14px' : '12px';
                
                style.textContent = `
              #${svg.id} {
                width: 100% !important;
                height: auto !important;
                max-width: 100% !important;
              }
                  #${svg.id} text {
                    font-size: ${mobileFontSize} !important;
                    font-family: '微软雅黑', 'Microsoft YaHei', sans-serif !important;
                  }
                  #${svg.id} .node text {
                    font-size: ${mobileNodeFontSize} !important;
                  }
                  #${svg.id} .edgeLabel text {
                    font-size: ${mobileEdgeLabelFontSize} !important;
                  }
                  #${svg.id} .cluster text {
                    font-size: ${mobileClusterFontSize} !important;
                  }
                `;
                svg.appendChild(style);
            
            // 自动缩放以适应容器
            const svgBounds = svg.getBBox ? svg.getBBox() : { width: containerWidth, height: 300 };
            const paddingX = 20; // 左右各添加20px的内边距
            const paddingY = 20; // 上下各添加20px的内边距
            
            // 更新viewBox以包含所有元素和内边距
            const newViewBox = `${svgBounds.x - paddingX} ${svgBounds.y - paddingY} ${svgBounds.width + 2 * paddingX} ${svgBounds.height + 2 * paddingY}`;
            svg.setAttribute('viewBox', newViewBox);
            
            // 为了解决某些浏览器的渲染问题，设置preserveAspectRatio
            svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
          }
            });
      } catch (error) {
        console.error("渲染流程图失败:", error);
        containerRef.current.innerHTML = `
          <div style="padding: 20px; text-align: left; color: red;">
                <h4>流程图渲染失败</h4>
            <p>错误信息: ${error.message}</p>
            <pre>${content}</pre>
              </div>
            `;
          }
        } catch (error) {
      console.error("处理流程图容器出错:", error);
    }
  };

  return (
    <div ref={containerRef} className="mermaid-diagram-container" style={{ width: '100%', height: '100%' }}></div>
  );
};

export default MermaidDiagram; 